<template>
  <div>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input clearable @clear="getusermenu" placeholder="请输入内容" v-model="queryInfo.query">
            <el-button slot="append" icon="el-icon-search" @click="getusermenu"></el-button>

            <!-- <el-button  type="primary">添加用户</el-button> -->
          </el-input>
        </el-col>
        <!-- <el-col :span="1"> -->
        <el-button type="primary" @click="changedialogVisible(true)">添加用户</el-button>
        <!-- </el-col> -->
      </el-row>
      <UserList></UserList>
      <!-- <Dialog></Dialog> -->
      <Pagination class="Pagination"></Pagination>
      <dispathDialog></dispathDialog>
    </el-card>
  </div>
</template>

<script>
import UserList from './UserList.vue'
import Pagination from './Pagination.vue'
import { mapState, mapMutations } from 'vuex'
import dispathDialog from './dispathDialog.vue'
// import Dialog from '@/component/Dialog.vue'
export default {
  components: {
    UserList,
    Pagination,
    // Dialog,
    dispathDialog
  },
  computed: {
    ...mapState({
      queryInfo: state => state.Users.queryInfo,
      dialogVisible: state => state.Users.dialogVisible
    })
  },
  methods: {
    ...mapMutations(['getusermenu', 'changedialogVisible'])
  }
}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
}
.Pagination {
  margin-top: 15px;
}
</style>
